<template>
  <div id="app" @click="now">
    <transition mode="out-in">
      <keep-alive>
          <component :is="coms[index]"></component>
      </keep-alive>
    </transition>

    
    <!-- 渲染底部导航 -->
     <TabBar ref="tabbar" />
  </div>
</template>

<script>
import HomePage from "./components/HomePage.vue";
import BbtPage from "./components/BbtPage.vue";
import IndendPage from "./components/IndendPage.vue";
import MinePage from "./components/MinePage.vue";
import TabBar from "./components/home-page/TabBar.vue";
export default {
  name: 'App',
  data(){
    return {
      index:0,
      coms:[HomePage,BbtPage,IndendPage,MinePage],
    }
  },
  component:{
    TabBar
  },
  methods:{
    now(){

      console.log(this.$refs.tabbar.tabIndex);
      this.index = this.$refs.tabbar.tabIndex ;
    }
  },
}
</script>

<style>
*{
  padding: 0;
  margin: 0;
}
html,body{
  height: 100%;
}
#app{
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
